<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Nova Missao</title>
<!-- Bootstrap -->

<style type="text/css">
.erro {
	color: red;
}
</style>
<link rel="stylesheet" href="resources/css/geral.css">

<script type="text/javascript" src="resources/js/jquery.js"></script>
</head>

<body>
<div id="topo"><h1>Foco na Missão</h1></div>

	<div id="container">
		<div class="erro">
			<form:errors path="missao.descricao" />
		</div>
		<div id="formMissao">
			<form action="adicionaMissao" method="post" role="form">
				Missão:</br>
				<textarea name="descricao"></textarea><br/>
				Status: <input type="checkbox" name="finalizado" /><br /> Data
				Finalização: <input type="text" name="dataFinalizacao" /> </br> <input
					type="submit" value="adicionar">
			</form>
		</div>
		<div id="listaMissoes">

			<c:forEach items="${missoes}" var="missao">
				<div id="missao_${missao.id}" class="boxMissao ${missao.finalizado? 'finalizada':''}">
					<div id="idMissao">${missao.id}</div>
					<div id="descMissao">${missao.descricao}</div>
					<div id="dataMissao">
						<fmt:formatDate value="${missao.dataFinalizacao.time }"
							pattern="dd/MM/yyyy" />
					</div>
					<div id="opcoesMissao">
						<a href="mostraMissao?id=${missao.id }">ALTERAR</a> | <a href="#"
							onClick="removeMissao(${missao.id })">REMOVER</a> | <a href="#"
							onClick="finalizaAgora(${missao.id })">CONCLUIR</a>
					</div>
				</div>
			</c:forEach>
	
		</div>
	</div>
	
	<script type="text/javascript">
	function finalizaAgora(id) {
		$.post("finalizaMissao", {'id' : id}, function(resposta){
			$("#missao_"+id).html(resposta);
		});
	}
	function removeMissao(id) {
		$.post("removeMissao", {'id' : id}, function(){
			$("#missao_"+id).hide();
		});
	}
</script>
</body>
</html>


